<!DOCTYPE html>
<html>
  <head>
    <title>react-avatar-editor</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <style>
      html, body {
          background-color: #121212;
          color: #fff;
          font-family: -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
      }
      .wrapper {
          margin: 0 auto;
          width: 100%;
          max-width: 500px;
      }

      .preview {
          display: inline-block;
          background: rgb(242,158,181);
          background: linear-gradient(315deg, rgba(242,158,181,1) 0%, rgba(243,89,120,1) 100%);
          padding: 20px;
          border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1 class="header">react-avatar-editor</h1>
      </header>
      <section>
        <h2>Demo time</h2>
        <div id="app"></div>


      </section>
      <footer>
        <p>
          <small><a href="https://github.com/mosch/react-avatar-editor">Github</a></small>
        </p>
      </footer>
    </div>
    <script src="./src/index.tsx" type="module"></script>
  </body>
</html>
